<script lang="tsx">
import {defineComponent, h,onMounted,ref} from 'vue';
const ObserverFn:any = (cb:Function)=>{
     return new IntersectionObserver((entries, observer)=>{
                entries.forEach(entry => {
                        // entry.isIntersecting 判断目标元素是否在视口中
                    
                        if (entry.isIntersecting) {
                            cb(entry.isIntersecting)
                        } 
                    }); 
             })
}
export default defineComponent({
     props:{
          styles:Object,
          key:Number,
          indexs:Number
     },
     setup(props,{slots}){
           const refs = ref(null);
           const statu = ref(false);
           onMounted(()=>{ 
             ObserverFn((e)=>{ 
                // 避免多次操作dom
                  if(e && !statu.value){
                    // 模拟网络
                      setTimeout(()=>{
                        statu.value=e; 
                      },200)
                  } 
                
             })?.observe(refs.value);
             
           })
           const loading = ()=>(
               <>
                  <div class={'loading'}> 
                    loading
                  </div>
               </>
           )
           return ()=>h('div',{
            class:['items',statu.value?'isShow':''],
            style:props.styles,
            ref:refs
           },statu.value?(slots.default?.()):loading())  
     }
})
</script>
<style scoped>
  .items{
      width: 200px; 
      /* border: 1px solid #fff; */
      box-sizing: border-box;
      padding: 10px 10px;
      box-sizing: border-box;
      transition: transform 0.2s ease 0s, opacity 0.5s ease 0s;
      opacity: 0.3; 
  }
  .loading{
     width: 100%;
     height: 100%;
     background-color: #eee;
     display: flex;
     justify-content: center;
     align-items: center;
  }
  .isShow{ 
      opacity: 1;
  }
</style>